<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时报表</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/vue-resource.js"></script>
		<link rel="stylesheet" href="../css/my/table.css" />
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../css/my/report.css" />
	</head>
	<body>
		<div id="vue_one" class="div_table layui-form">

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">开始：</label>
					<div class="layui-input-block">
						<input type="text" id="startTime" class="layui-input">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">结束：</label>
					<div class="layui-input-block">
						<input type="text" id="endTime" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-block">
						<select id="eq_quipmentAddressId" lay-verify="required">
							<option v-for="(d, index) in device" :value="d.equipmentAddressid">{{d.equipmentAddressid}}</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-block">
						<button class="layui-btn" @click="getMinReport()">查询</button>
					</div>
				</div>
			</div>

			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>deviceId</th>
						<th>hourName</th>
						<th>hourHum</th>
						<th>hourTemp</th>
						<th>times</th>
						
					</tr>
				</thead>
				<tbody>
					<tr v-for="(hour, index) in hourReport">
						<td >
							{{hour.deviceId}}
						</td>
						<td>
							{{hour.hourName}}
						</td>
						<td>
							{{hour.hourHum}}
						</td>
						<td>
							{{hour.hourTem}}
						</td>
						<td>
							{{hour.times}}
						</td>
					</tr>

				</tbody>
			</table>
		</div>
	</body>
	<script>
		var v = new Vue({
			el: '#vue_one',
			data: {
				minReportAdd: {
					deviceId: '',
					room: ""
				},
				device: [],
				hourReport: []
			},
			mounted: function() {

			},
			methods: {
				getStartTime: function() {
					return $("#startTime").val();
				},
				getEndTime: function() {
					return $("#endTime").val();
				},
				IsDate: function(timeText) {
					//验证时间格式
					var regTime = /^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s((([0-1][0-9])|(2?[0-3]))\:([0-5]?[0-9])((\s)|(\:([0-5]?[0-9])))))?$/;
					if(regTime.test(timeText)) {
						console.log("时间格式正确");
					} else {
						alert("时间格式错误")
					}

				},
				getEquipment: function() {
					console.log("请求设备信息")
					this.$http.get('http://localhost:8080/equipmentController/getByEquipment').then(function(res) {
						//console.log(res.body);
						v.device = res.body;
						this.$nextTick(() => {
							// 这里写jquery代码
							$(function() {
								XR();
							})

						})
						console.log(v.device);
					}, function() {
						console.log('请求失败处理');
					});
				},
				getMinReport: function() {
					//发送get请求
					console.log("请求分报表信息")
					var start = v.getStartTime();
					var end = v.getEndTime();
					console.log("start:" + start);
					v.IsDate(start);
					console.log("end:" + end);
					v.IsDate(end);
					var dateStart = new Date(start.replace(/-/g, "/")); //replace方法将-转为/
					console.log("dateStart:" + dateStart);
					var dateEnd = new Date(end.replace(/-/g, "/"))
					console.log("dateEnd:" + dateEnd);
					var dateDiff = dateEnd.getTime() - dateStart.getTime(); //时间差的毫秒数
					var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
					console.log("dayDiff:" + dayDiff);
					startYear = start.substring(0,4);
					endYear = end.substring(0,4);
					console.log("startYear:"+startYear);
					startMonth = start.substring(5,7);
					endMonth = end.substring(5,7);
					console.log("startMonth:"+startMonth);
					if(startYear != endYear) {
						alert("最大时间间隔不能超过一天")
					} else if(startMonth != endMonth) {
						alert("最大时间间隔不能超过一天")
					} else if(dayDiff > 1) {
						alert("最大时间间隔不能超过一天")
					} else {
						var deviceId = $("#eq_quipmentAddressId").val();
						this.$http.post('http://localhost:8080/hourController/getHourReportByDays', {
							deviceId: deviceId,
							startTime: start,
							endTime:end
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res.body);
							v.hourReport = res.body;
							/*if(res.body == 1) {
								v.deleteDev(index);
								layer.alert('ok', {
									icon: 1
								});
							} else {
								layer.alert('no', {
									icon: 5
								});
							}*/
						}, function(res) {
							console.log(res.status);
						});
					}

					/*	this.$http.get('http://localhost:8080/equipmentController/').then(function(res) {
						//console.log(res.body);
						
						this.$nextTick(() => {
							// 这里写jquery代码
							$(function() {
								//v.updateAndKeepJquery();
							})

						})
						
					},
					function() {
						console.log('请求失败处理');
					});*/

				},
				removeMinReport: function(index) {
					console.log("移除信息")
					this.$http.post('http://localhost:8080/equipmentController/removeEquipment', {
						equipmentId: v.device[index].equipmentId
					}, {
						emulateJSON: true
					}).then(function(res) {
						console.log(res.body);
						if(res.body == 1) {
							v.deleteDev(index);
							layer.alert('ok', {
								icon: 1
							});
						} else {
							layer.alert('no', {
								icon: 5
							});
						}
					}, function(res) {
						console.log(res.status);
					});
				}
			}
		})

		$(document).ready(function() {
			XR();
			v.getEquipment();
		});

		function XR() {
			//Demo
			layui.use('form', function() {
				var form = layui.form;
				form.render();
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			layui.use('element', function() {
				var element = layui.element;

				//一些事件监听
				element.on('tab(demo)', function(data) {
					console.log(data);
				});
			});
			layui.use('laydate', function() {
				var laydate = layui.laydate;

				//日期时间选择器
				laydate.render({
					elem: '#startTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endTime',
					type: 'datetime'
				});
			});
		}
	</script>
</html>
